Setting up a route with mock data

Let's create our first page with some mock pet data.

Create a Home component with mock data in src/js/pages/Home/Home.js:

import React from 'react';

const Home = () => {
  // Mock data - we'll replace this with real API data later
  const pets = [
    { id: 1, name: 'Max', species: 'Dog', breed: 'Labrador', age: 3, image: 'https://picsum.photos/300' },
    { id: 2, name: 'Whiskers', species: 'Cat', breed: 'Siamese', age: 2, image: 'https://picsum.photos/300' },
    { id: 3, name: 'Hopper', species: 'Rabbit', breed: 'Dutch', age: 1, image: 'https://picsum.photos/300' }
  ];

  return (
    <div>
      <h1>Available Pets</h1>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
        {pets.map(pet => (
          <div key={pet.id} style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '5px' }}>
            <img src={pet.image} alt={pet.name} style={{ width: '200px', height: '200px', objectFit: 'cover' }} />
            <h2>{pet.name}</h2>
            <p>{pet.species} • {pet.breed}</p>
            <p>Age: {pet.age} {pet.age === 1 ? 'year' : 'years'}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Home;

Now, set up the route in src/js/routes/index.js:

import Home from '../pages/Home/Home';

const routes = [
  {
    path: "/",
    index: true,
    component: Home,
  }
];

export default routes;

Refresh your browser, and you should see the mock pet cards displayed.